<template>
  <div class="goods">
    <div class="chaxun">
      <el-form :inline="true" :model="formInline" ref="seachFrom">
        <el-form-item label="商品名称" prop="skuName">
          <el-input v-model="formInline.skuName"></el-input>
        </el-form-item>
        <el-form-item label="商品状态" prop="skuStatus">
          <el-select  v-model="formInline.skuStatus">
            <el-option label="全部" value=""></el-option>
            <el-option label="在售" value="0"></el-option>
            <el-option label="已下架" value="1"></el-option>
            <el-option label="未发布" value="2"></el-option>
          </el-select >
        </el-form-item>
        <el-form-item label="广告词" prop="skuAd">
          <el-input v-model="formInline.skuAd"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="allbutton">
      <el-button type="primary" @click="addmodel">新增</el-button>
      <el-button type="primary" @click="editmodel">修改</el-button>
      <el-button type="primary" @click="deldata">删除</el-button>
    </div>

    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        border
        tooltip-effect="dark"
        max-height="450"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column prop="skuCode" label="商品编码"  fixed width="120" sortable></el-table-column> -->
        <el-table-column prop="skuName" label="商品名称"  fixed width="150" sortable></el-table-column>
        <el-table-column prop="costPrice" label="定价" width="50" ></el-table-column>
        <el-table-column prop="salePrice" label="售价" width="50" ></el-table-column>
        <el-table-column prop="saleNum" label="销售数量" width="50" ></el-table-column>
        <el-table-column prop="firstCateName" label="一级分类" width="80" ></el-table-column>
        <el-table-column prop="secondCateName" label="二级分类" width="80" ></el-table-column>
        <el-table-column prop="saleTime" label="上架时间" width="50" ></el-table-column>
        <el-table-column prop="visitNum" label="浏览量" width="120" ></el-table-column>
        <el-table-column prop="skuAd" label="广告词" width="180"></el-table-column>
        <el-table-column prop="skuIntroduction" label="商品介绍" width="180"></el-table-column>
        <el-table-column prop="businessName" label="商家名称" width="80"></el-table-column>
        <el-table-column prop="businessCode" label="商品编码" width="150"></el-table-column>
        <el-table-column prop="storeNum" label="商品库存" width="80"></el-table-column>
        <el-table-column prop="isbn" label="书号" width="120"></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,50,100, 200, 300, 400]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalnum"
      ></el-pagination>
    </div>
    <!-- 新增用户 -->
    <el-dialog
      title="新增商品"
      :visible.sync="dialogVisibleadd"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form :inline="true" :model="add" :rules="rules" ref="addruleForm">
        <el-form-item label="商品名称" prop="skuName" label-width="100px">
          <el-input v-model="add.skuName"></el-input>
        </el-form-item>
        <el-form-item label="书号" prop="isbn" label-width="100px">
          <el-input v-model="add.isbn"></el-input>
        </el-form-item>
        <el-form-item label="一级分类" prop="firstCateCode" label-width="100px">
          <el-select v-model="add.firstCateCode" @change="findFirstKinds(add.firstCateCode,'add')">
            <el-option 
            v-for="x in firstCateCodeList"
            :key="x.cateCode"
            :label="x.cateName"
            :value="x.cateCode"
            ></el-option>        
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="secondCateCode" label-width="100px">
          <el-select v-model="add.secondCateCode">
            <el-option 
            v-for="x in secondCateCodeList"
            :key="x.cateCode"
            :label="x.cateName"
            :value="x.cateCode"
            ></el-option>        
          </el-select>
        </el-form-item>
         <el-form-item label="广告词" prop="skuAd" label-width="100px">
          <el-input v-model="add.skuAd" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" prop="skuIntroduction" label-width="100px">
          <el-input v-model="add.skuIntroduction" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商家编码" prop="businessCode" label-width="100px">
          <el-select v-model="add.businessCode"  @change="findAllCustomer">
            <el-option 
            v-for="x in customerList"
            :key="x.businessCode"
            :label="x.businessName"
            :value="x.businessCode"
            ></el-option>        
          </el-select>
        </el-form-item>
        <el-form-item label="库存" prop="storeNum" label-width="100px">
          <el-input v-model="add.storeNum"></el-input>
        </el-form-item>
        <el-form-item label="成本价" prop="frontCostPrice" label-width="100px">
          <el-input v-model="add.frontCostPrice"></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="frontSalePrice" label-width="100px">
          <el-input v-model="add.frontSalePrice"></el-input>
        </el-form-item> 
        <el-form-item label="图片" prop="images" label-width="100px">
          <el-upload
            :action="upImgUrl"
            list-type="picture-card"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl">
          </el-dialog>
        </el-form-item>        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureadd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户 -->
    <el-dialog
      title="修改商品"
      :visible.sync="dialogVisibleedit"
      :close-on-click-modal="false"
      :show-close="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form :inline="true" :model="edit" :rules="rules" ref="editruleForm">
        <el-form-item label="商品名称" prop="skuName" label-width="100px">
          <el-input v-model="edit.skuName"></el-input>
        </el-form-item>
        <el-form-item label="书号" prop="isbn" label-width="100px">
          <el-input v-model="edit.isbn"></el-input>
        </el-form-item>
        <el-form-item label="一级分类" prop="firstCateCode" label-width="100px">
          <el-select v-model="edit.firstCateCode" @change="findFirstKinds(edit.firstCateCode,'edit')">
            <el-option 
            v-for="x in firstCateCodeList"
            :key="x.cateCode"
            :label="x.cateName"
            :value="x.cateCode"
            ></el-option>        
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="secondCateCode" label-width="100px">
          <el-select v-model="edit.secondCateCode">
            <el-option 
            v-for="x in secondCateCodeList"
            :key="x.cateCode"
            :label="x.cateName"
            :value="x.cateCode"
            ></el-option>        
          </el-select>
        </el-form-item>
         <el-form-item label="广告词" prop="skuAd" label-width="100px">
          <el-input v-model="edit.skuAd" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" prop="skuIntroduction" label-width="100px">
          <el-input v-model="edit.skuIntroduction" type="textarea"></el-input>
        </el-form-item>
        <!-- <el-form-item label="商家编码" prop="businessCode" label-width="100px">
          <el-input v-model="edit.businessCode"></el-input>
        </el-form-item> -->
        <el-form-item label="库存" prop="storeNum" label-width="100px">
          <el-input v-model="edit.storeNum"></el-input>
        </el-form-item>
        <el-form-item label="成本价" prop="frontCostPrice" label-width="100px">
          <el-input v-model="edit.frontCostPrice" ></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="frontSalePrice" label-width="100px">
          <el-input v-model="edit.frontSalePrice"></el-input>
        </el-form-item> 
        <el-form-item label="图片" prop="images" label-width="100px">
          <el-upload
            :action="upImgUrl"
            list-type="picture-card"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl">
          </el-dialog>
        </el-form-item>    
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sureedit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        skuName:"",
        skuAd:"",
        skuStatus:"",
        pagesize:"",
        pageNum:"",
      },
      tableData:[],
      add: {
        skuName:"",
        skuAd:"",
        skuStatus:"",
        isbn:"",
        firstCateCode:"",
        secondCateCode:"",
        skuIntroduction:"",
        storeNum:"",
        businessCode:"",
        frontCostPrice:"",
        frontSalePrice:"",
        visitNum:"",
        images:[]
      },
      upImgUrl:this.$store.state.url+'/goods/uploadImage',
      firstCateCodeList:[],//一级分类
      secondCateCodeList:[],//二级分类
      customerList:[],//商家分类
      fileList:[],//图片容器
      edit: {},
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisibleedit: false,
      dialogVisibleadd: false,
      rules: {
        skuName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        isbn: [{ required: true, message: "请输入书号", trigger: "blur" }],
        frontCostPrice: [{ required: true, message: "请输入定价", trigger: "blur" }],
        frontSalePrice: [{ required: true, message: "请输入售价", trigger: "blur" }],
        firstCateCode: [{ required: true, message: "请输入一级分类", trigger: "change" }],
        businessCode: [{ required: true, message: "请输入商家编码", trigger: "blur" }],
        storeNum: [{ required: true, message: "请输入库存", trigger: "blur" }],
      },
      totalnum: 0,
      pagesize: 10,
      currentPage: 1,
      hasChooseList: []
    };
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    //删除图片
    handleRemove(file, fileList) {
      this.fileList=fileList
    },
    //查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res,file,fileList){
      this.fileList=fileList
    },
    getData() {
      this.formInline.pagesize=this.pagesize
      this.formInline.pageNum=this.currentPage
      this.$axios.post(this.$store.state.url+'/goods/listGoods',this.formInline).then(res => {
          if (res.data.code == 1) {
            this.tableData=res.data.data.list
            this.totalnum=res.data.data.total
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //重置
    chongzhi(){
      this.$refs["seachFrom"].resetFields()
      this.pagesize= 10
      this.currentPage= 1
      this.getData()
    },
    //查询一级二级分类
    findFirstKinds(val,flag){
      this.$axios.get(this.$store.state.url+'/cate/findCateGoryByCateCode?cateCode='+val).then(res => {
          if (res.data.code == 1) {
            if(val==0){
            this.firstCateCodeList=res.data.data
            }else{
              if('add'==flag){
              this.add.secondCateCode=""
              }else if(flag=="edit"){
              this.edit.secondCateCode=""
              }
              this.secondCateCodeList=res.data.data
            }
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //查询全部商家
    findAllCustomer(){
       this.$axios.get(this.$store.state.url+'/goods/listBusiess').then(res => {
          if (res.data.code == 1) {
            this.customerList=res.data.data
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //查询
    onSubmit() {
      this.getData()
    },
    //对话框取消
    quxiao() {
      this.dialogVisibleadd = false;
      this.dialogVisibleedit = false;
    },
    //点开新增对话框
    addmodel() {
      this.fileList=[]
      this.dialogVisibleadd = true;
      if (this.$refs["addruleForm"]) {
        this.$refs["addruleForm"].resetFields();
      }
      this.findFirstKinds("0")//查询一二级分类先给0
      this.findAllCustomer()
    },
    //确认新增
    sureadd() {
      var listImg=[]
      for(var i=0;i<this.fileList.length;i++){
        listImg.push(this.fileList[i].response.data)
      }
      this.$refs["addruleForm"].validate(valid => {
        if (valid) {
          this.add.images=listImg
          this.$axios.post(this.$store.state.url+'/goods/addGoods',this.add).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.dialogVisibleadd = false;
            this.fileList=[]
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改框查询商品详情
    getGoodsDetail(val){
          this.$axios.get(this.$store.state.url+'/goods/findGoodsBySkuCode?skuCode='+val).then(res => {
          if (res.data.code == 1) {
            this.edit=res.data.data
            this.edit.frontCostPrice=this.edit.costPrice
            this.edit.frontSalePrice=this.edit.salePrice
            this.fileList=res.data.data.images
            this.fileList=[]
            if(this.edit.images){
              for(var i=0;i<this.edit.images.length;i++){
                this.fileList.push({
                  url:this.edit.images[i]
                })
              }
            }
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //点开修改对话框
    editmodel() {
      if (1 == this.hasChooseList.length) {
        this.dialogVisibleedit = true;
        this.findFirstKinds(0,'edit')
        this.findFirstKinds(this.hasChooseList[0].firstCateCode,'add')
        this.getGoodsDetail(this.hasChooseList[0].skuCode)
      } else {
        //提示不让修改
        this.$message.error("请选择一条数据进行修改");
      }
      if (this.$refs["editruleForm"]) {
        this.$refs["editruleForm"].resetFields();
      }
    },
    //确定修改
    sureedit() {
      this.$refs["editruleForm"].validate(valid => {
        if (valid) {
          var listImg=[]
          for(var i=0;i<this.fileList.length;i++){
            if(this.fileList[i].response){
              listImg.push(this.fileList[i].response.data)
            }else{
              listImg.push(this.fileList[i].url)
            }
          }
          this.edit.images=listImg
          this.$axios.post(this.$store.state.url+'/goods/updateGoodsInfo',this.edit).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.dialogVisibleedit = false;
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //多选
    handleSelectionChange(val) {
      this.hasChooseList = val;
    },
    //删除
    deldata() {
      if (0 < this.hasChooseList.length) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            this.$axios.get(this.$store.state.url+'/goods/deleteGoods?skuCode='+this.hasChooseList[0].skuCode).then(res => {
          if (res.data.code == 1) {
            this.getData();
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          }else{
            this.$message({ 
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })       
         }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message.error("请选择一条数据进行删除");
      }
    },
    handleSizeChange(val) {
      this.pagesize=val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getData()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.biaoge {
  margin-top: 30px;
}
.block {
  float: right !important;
}
</style>

<style>
.goods.el-input__inner{
  width: 200px 
}
.el-pagination .el-select .el-input .el-input__inner {
 padding-right: 25px;
 border-radius: 3px;
 width: 100px;
}
</style>

